<template>
  <!--测评-->
  <div>
    <Modal class-name="vertical-center-modal" v-model="loginShow" footer-hide width="580px" class="login_model" @on-visible-change="modalChange">
      <p class="model_header">登录勤博</p>
      <div class="model_content">
        <Form ref="phone" :model="val" :rules="phoneRule">
          <FormItem prop="phone">
            <Input v-model.trim="val.phone" placeholder="手机号码"  ref="phone1"  @on-keyup="validatePhone" :maxlength="11" />
            <img src="../../assets/phone1.png" alt="" width="24">
          </FormItem>
          <FormItem prop="code">
            <Input v-model.trim="val.smscode" placeholder="短信验证码" ref="code1" :maxlength="6" @on-keyup="validateCode" @keydown.enter.native="login" />
            <img src="../../assets/suo.png" alt="" width="24">
            <Button type="primary" size="large" class="send" :class="{disabled:codeUse}" @click.stop="getSmsCode('phone')">{{tip}}</Button>
          </FormItem>
          <FormItem>
            <p class="tips">温馨提示：未注册账户的手机号，登录时将自动注册</p>
            <Button type="primary" long class="loginbtn" @click.stop="login">登录</Button>
          </FormItem>
        </Form>
        <div class="other clearfix" >
          <Checkbox v-model="single" style="display: none">十天内免登录</Checkbox>
          <div >
            <span>其他登录方式</span>
            <a href=""  class="margin20" @click.prevent="weixinLogin"><img src="../../assets/qq.png" alt="" width="26"></a>
            <!--<a href="" @click.prevent="qqLogin" class="margin20"><img src="../../assets/weixin.png" alt="" width="26"></a>-->
            <a href="" @click.prevent="weiboLogin"><img src="../../assets/zhifubao.png" alt="" width="26"></a>
            <p class="pull-right">登录即代表您已阅读并同意 <router-link :to="{path:'/html',query:{type:'disclaimer',html:''}}" target='_blank' tag="a">《勤博用户服务协议》</router-link></p>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .tips{
    margin-bottom: 15px;
    font-size: 12px;
  }
  .other .tips{
    margin-top: 15px;
    font-size: 12px;
  }
  .pinglun {
    .ivu-form-item {
      margin-bottom: 10px;
    }

    .textarea {
      position: relative;

      button {
        position: absolute;
        background-color: #957960;
        color: #fff;
        height: 94px;
        width: 95px;
        right: 0;
        font-size: 19px;
        top: 0;
      }
    }

    .tip {
      font-size: 14px;
      color: #999;
      margin: 0px 0 15px;
    }

    .all {
      font-size: 14px;
      color: #000;
      margin-bottom: 20px;
    }

    .list > li {
      border-bottom: 1px dashed #dbdbdb;
      padding-bottom: 15px;
      margin-bottom: 15px;

      .left_content {
        img {
          border-radius: 50%;
        }

        ul {
          margin: 5px 0 0 15px;

          li {
            font-size: 14px;
            color: #000;
            line-height: 30px;
          }

          li:last-child {
            color: #999;
          }
        }
      }

      .pull-right {
        font-size: 14px;
        color: #999;

        img {
          margin-left: 10px;
          vertical-align: baseline;
        }
      }

      .other_pinglun {
        background-color: #f9f9f9;
        margin: 15px 0 0 55px;
        padding: 20px;

        li {
          font-size: 14px;
          color: #000;
          line-height: 25px;
        }
      }
    }

    .list > li:last-child {
      border-bottom: none;
    }

    .look {
      background-color: #f9f9f9;
      height: 56px;
      font-size: 14px;
      color: #999;
      border: none;
    }

    .ivu-btn:focus {
      box-shadow: none;
    }
  }

  .ivu-icon {
    font-size: 15px;
    color: #999;
    margin-bottom: 3px;
  }

  .model_header {
    color: #fff;
    text-align: center;
    background-color: #957960;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
  }

  .model_content {
    padding: 30px 50px;

    form img {
      position: absolute;
      left: 10px;
      top: 11px
    }

    a {
      display: block;
    }

    .ivu-input {
      border-radius: 0;
      display: inline-block;
      width: 80%;
      height: 61px;
    }

    button {
      background-color: #957960;
      border-color: #957960;
    }

    .send {
      position: absolute;
      right: 0;
      top: 0;
      height: 50px;
      color: #fff;
      font-size: 14px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .loginbtn {
      height: 50px;
      font-size: 20px;
    }
  }

  .other {
    font-size: 14px;
    color: #999;

    p {
      margin-top: 5px;
      a{
        color: #9C7649;
      }
    }
    a {
      display: inline-block;
    }

    .margin20 {
      margin: 0 5px;
    }

    img {
      vertical-align: bottom;
    }
  }

  .divider {
    height: 60px;
    background-color: #f5f5f5;
    font-size: 18px;
    line-height: 60px;
    text-align: left;

    span {
      margin: 0 10px;
    }

    a {
      color: #333;

      &:hover {
        color: #073c68;
        font-weight: 700;
      }
    }
  }

  .auto.twopart.clearfix {
    border: none;
    margin-top: 40px;

    .left {
      padding: 20px;
      border: 1px solid #ddd;
      margin-right: 20px;
    }

    .right {
      border: 1px solid #ddd;
      width: 380px;

      .title {
        font-size: 18px;
        color: #000;
        border: none;
      }

      ul {
        padding-top: 0;
      }

      li {
        line-height: normal;
        margin-left: 0;
        margin-bottom: 10px;

        p.pull-left {
          position: relative;

          span {
            background-color: #ff9900;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 0px 5px;
            position: absolute;
            bottom: 15px;
            left: 0;
          }

        }

        .wid170 {
          width: 170px;
        }

        div.pull-left {
          padding: 0;
          font-size: 14px;
          color: #333;
          margin-left: 20px;
          height: auto;

          p:first-child {
            font-weight: normal;
            height: 48px;
            margin: 0;
          }

          p:last-child {
            font-size: 14px;
            font-weight: normal;

            img {
              vertical-align: middle;
              margin-right: 10px;
            }

            span {
              margin-left: 20px;
            }
          }

        }

        div.curse {
          position: relative;
          margin-left: 0;

          .bg {
            width: 151px;
            height: 81px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.39);
          }

          .play {
            position: absolute;
            z-index: 9;
            top: 50%;
            left: 50%;
            margin-left: -13px;
            margin-top: -13px;
          }

          .vip {
            padding: 0;
            background: url("../../assets/vip.png") no-repeat;
            width: 24px;
            height: 36px;
            background-size: 100% 100%;
            font-size: 12px;
            color: #fff;
            line-height: 30px;
            text-align: center;
            position: absolute;
            right: 0;
            top: 0
          }

          span {
            background-color: #ff9900;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding: 3px 5px;
            position: absolute;
            bottom: 10px;
            left: 0;
          }
        }

        div.shipin p:last-child {
          font-size: 14px;
          color: #999;

          img {
            vertical-align: middle;
            margin: 0 5px 0 20px;
          }
        }
      }

    }
  }

  .auto.clearfix {
    border: 1px solid #ddd;
    position: relative;

    .left {
      width: 800px;
      text-align: left;

      .bottom {
        font-size: 14px;
        color: #999;
        padding: 30px 0 30px 20px;
        .weixinshare{
          position: relative;
          .share_img{
            position: absolute;
            top:23px;
            left: 0;
            background-color: #fff;
            padding: 5px;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
            z-index: 2;
            display: none;

          }
          &:hover .share_img{
            display: block;
            transition: all 0.3s;
          }
        }

        img {
          vertical-align: middle;
        }

        > img {
          margin-right: 10px;
        }

        > img:nth-of-type(2) {
          margin-left: 30px;
        }

        .pull-right {
          span {
            margin-right: 10px;
          }

          img {
            margin: 0 5px;
          }
        }
      }

      .avatar {
        font-size: 18px;
        color: #000;
        margin-bottom: 10px;

        img {
          margin-right: 20px;
          vertical-align: middle;
        }
      }

      .introduce {
        margin-left: 48px;
        line-height: 33px;
        font-size: 14px;
        color: #666;
      }
    }

    .right {
      width: 398px;
      text-align: left;

      .title {
        font-size: 24px;
        color: #000;
        border-bottom: 1px solid #f5f5f5;
        padding: 20px 10px 15px;
      }

      .bottom {
        color: #ff3300;
        font-size: 24px;
        position: absolute;
        bottom: 20px;
        right: 20px;

        button {
          margin-left: 10px;
          background-color: #957960;
          border-color: #957960;
          height: 37px;
          width: 150px;
          font-size: 14px;
          color: #fff;

        }
      }

      ul {
        font-size: 14px;
        padding: 20px 10px;
        color: #000;

        li {
          line-height: 30px;
          margin-left: 30px;
          margin-bottom: 10px;
        }

        .color333 {
          color: #333;
        }
      }

    }
  }

</style>
<script type="text/ecmascript-6">
  import {getMobile,loginApp,initLogin,sendSms,thirdLoginAddress} from '../../http'
  import {setStore} from '../../storage'
  export default {
    inject:['reload'],
    name: '',
    data() {
      return {
        //第三方登录地址
        qq:'',
        weibo:'',
        wechat:'',
        //登录框start
        single: false,
        loginShow: false,
        phonenumber:'',
        oldNum:'',
        val:{
          phone:'',
          smscode:''
        },
        codeUse:false,
        phonecode:0,
        tip:'发送验证码',
        count: 0,
        mobile:'',
        time:'1',
        phoneRule:{
          phone:[
            {required:true, message:'请填写手机号', trigger:'blur' },
            {type: 'string',pattern :/^[1][3,4,5,7,8][0-9]{9}$/ ,message:'请正确填写手机号',trigger:'blur'}
          ]
        },
        //登录框end
        isshow:true,
        nowIndex:0,
        isclick:false,
      };
    },
    methods: {
      //关闭登录框
      modalChange(){
        this.val.phone = '';
        this.val.smscode = '';
        if(this.timer !== null || this.timer !==  ''){
          clearInterval(this.timer);
          // if(this.tip !== '发送验证码') {
          this.tip = '发送验证码';
          this.codeUse = false;
          this.timer = '';
          // }
        }
      },
      validatePhone() {
        this.val.phone = this.$refs.phone1.value.replace(/[^\d]{1,11}/g, "")
      },
      validateCode() {
        this.val.smscode = this.$refs.code1.value.replace(/[^\d]{1,11}/g, "")
      },
      //获取验证码
      getSmsCode(name){
        this.$refs[name].validate((valid) => {
          if(valid) {
            getMobile({mobile: this.val.phone}).then(res => {
              if (res.code === 200) {
                this.mobile = res.data.mobile;
                this.time = res.data.time;
                const TIME_COUNT = 60;
                if (!this.timer) {
                  sendSms({mobile: this.mobile, time: this.time}).then(res => {
                    //自动填充验证码
                    // this.val.smscode = res.data;
                    if (res.code === 200) {
                      this.phonecode = res.data;
                      this.count = TIME_COUNT;
                      this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                          this.codeUse = true;
                          this.tip = this.count + "s后重新发送";
                          this.count--;
                        } else {
                          clearInterval(this.timer);
                          this.tip = '发送验证码';
                          this.codeUse = false;
                          this.timer = null;
                        }
                      }, 1000)
                    } else {
                      this.$Notice.warning({
                        title: "温馨提示",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch();
                }
              }
            }).catch()
          }
        })
      },
      login(){
        if(this.val.smscode.length === 0){
          this.$Notice.warning({
            title: "登录提醒",
            desc:"请填写验证码",
            duration: 3,
          });
        }else{
          //验证码登录
          loginApp({username:this.val.phone,smscode:this.val.smscode}).then(res => {
            if(res.code === 200) {
              setStore('token', res.data.access_token);
              setStore('refresh_token', res.data.refresh_token);
              initLogin().then(res => {
                if(res.code === 200){
                  this.reload()
                }else{
                  this.$Notice.warning({
                    title: "温馨提示",
                    desc: "用户登录失败!",
                    duration: 3,
                  });
                }
              }).catch()
              this.loginShow = false;
            }else{
              this.$Notice.warning({
                title: "温馨提示",
                desc: res.info,
                duration: 3,
              });
            }
          }).catch()
        }
      },
      //微博第三方登录
      weiboLogin(){
       window.location.href = this.weibo;
      },
      //微信第三方登录
      weixinLogin(){
        window.location.href = this.wechat;
      },
      //QQ第三方登录
      qqLogin(){
       window.location.href = this.qq;
      },
      //登录框end
      showModal(){
        this.loginShow=true;
      },
      //获取第三方登录地址
      getThirdLoginAddress(){
        thirdLoginAddress().then(res => {
          this.qq = res.data.qq;
          this.wechat = res.data.wechat;
          this.weibo = res.data.weibo;
        })
      }
    },
    created() {
      this.getThirdLoginAddress()
    },
    components: {
    }
  }
</script>
